<template>
	<view class="container">
		<u-toast ref="tip"></u-toast>
		<view class="title-container">
			<view class="img-container">
				<image src="../../static/png/logo.png"></image>
			</view>
			<view class="message-container">
				<view class="login-title">手机号码快捷登录</view>
				<view class="login-title2">未注册过的手机号码将自动创建账号</view>
			</view>
		</view>
		<view class="input-container">
			<input class="login-input u-border-bottom" type="text" style="font-size: 30rpx;" v-model="phone" :placeholder="type == 'phone' ? '请输入手机号码' : '请输入用户名'" @input="inputPhone"/>
			<view class="password-container u-border-bottom">
				<input class="login-input" v-if="type == 'phone'" type="number" style="font-size: 30rpx;" v-model="code" :placeholder="placeholder" @input="inputCode"/>
				<input class="login-input" v-if="type == 'password'" type="password" style="font-size: 30rpx;" v-model="code" :placeholder="placeholder" @input="inputCode"/>
				<u-button v-if="type == 'phone'" @click="sendCode" color="#4271ff" :plain="true" shape="circle" style="width: 360rpx"
					type="primary" :disabled="!phoneFlag" :text="btnText"></u-button>
			</view>
		</view>
		<view :class="codeFlag && loginFlag ? 'can-login-btn' : 'no-login-btn-click'" @click="login">登录</view>
		<view class="login-type-container">
			<view class="login-change-type-container">
				<view class="login-change-type-password" v-if="type != 'password'" @click="changeType('password', '请输入密码')">密码登录</view>
				<view class="login-change-type-code" v-if="type != 'phone'" @click="changeType('phone', '请输入验证码')">验证码登录</view>
			</view>
			<!-- <view class="login-cannot-get-code">收不到验证码?</view> -->
			<view class="login-cannot-get-code" @click="goRegister">新用户注册?</view>
		</view>
		<view class="tip-container">
			点击登录，即表示同意
			<span class="tips-color">《隐私政策》</span>
			<span>和</span>
			<span class="tips-color">《服务条款》</span>
		</view>
		<!-- <u-button @click="clear">清除缓存</u-button> -->
	</view>
</template>

<script>
	// import { login, login2 } from '../../api/user.js';
	import { setToken, setUuid, removeToken, removeUuid, setValue } from '@/util/auth.js';
	export default {
		data() {
			return {
				placeholder: '请输入密码',
				type: 'phone',
				phone: '',
				code: '',
				btnText: '发送验证码',
				phoneFlag: false,
				codeFlag: false,
				loginFlag: false,
				totalTime: 180,
				userInfo: {},
				phoneStr: /^(0|86|17951)?(13[0-9]|15[012356789]|16[6]|19[89]]|17[01345678]|18[0-9]|14[579])[0-9]{8}$/,
				codeStr: /^\d{4}$/,
			}
		},
		onLoad() {

		},
		onReady() {
			// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
			// this.$refs.myForm.setRules(this.rules)
		},
		methods: {
			/**
			 * 跳转到注册
			 */
			goRegister() {
				this.redirectTo("/register/index?");
			},
			changeType(type, placeholder) {
				this.placeholder = placeholder;
				this.type = type;
			},
			clear() {
				removeToken();
				removeUuid();
			},
			inputPhone(e) {
				if(this.phoneStr.test(e.detail.value) && this.phoneStr.test(this.phone)) {
					this.phoneFlag = true;
					console.log("真的");
					if (this.code) {
						this.loginFlag = true;
					}
				} else {
					this.phoneFlag = false;
				}
			},
			inputCode(e) {
				if (this.type == 'password' && this.code) {
					this.codeFlag = true;
					this.loginFlag = this.phoneStr ? true : false;
					return;
				}
				if(this.codeStr.test(this.code)) {
					this.codeFlag = true;
				} else {
					this.codeFlag = false;
				}
			},

			/**
			 * 倒计时
			 */
			getCodeCallBack() {
				if (!this.phoneFlag) {
					return;
				}
				this.phoneFlag = false;
				this.loginFlag = true;
				this.btnText = this.totalTime + 's后重新发送';
				let clock = setInterval(() => {
					this.totalTime--
					this.btnText = this.totalTime + 's后重新发送'
					if (this.totalTime <= 160) {
						clearInterval(clock)
						this.btnText = '重新发送验证码'
						this.totalTime = 180
						this.phoneFlag = true
						console.log(this.phone, "号码");
					}
				}, 1000)
				this.clock = clock;
			},
			/**
			 * 发送验证码
			 */
			sendCode() {
				if (!this.phoneFlag) {
					return;
				}
				var that = this;
				// this.errorTips(that.$refs.tip, "发送成功", null);
				this.$req.getCode({phone: this.phone}).then(res => {
					if (!res.success) {
						that.errorTips(that.$refs.tip, res.message, null);
						return;
					}
					console.log(res, "res");
					that.successTips(that.$refs.tip, "发送成功", null);
				});
				this.getCodeCallBack();
			},
			login() {
				// if (!this.loginFlag) {
				// 	return;
				// }
				// uni.$showMsg();
				// 调用状态管理内的函数请求
				// user是store/index.js下定义的user名称，login是user这个文件内的请求函数
				// code跟iv是传送到store/modules/user.js下login函数内的参数

				var that = this;
				if (that.type == 'phone') {
					var obj = {phone: this.phone, code: this.code, grant_type: that.type, client_id: 'phone_client_id', client_secret: 123};
				} else if (that.type == 'password') {
					var obj = {username: this.phone, password: this.code, grant_type: that.type, client_id: 'phone_client_id', client_secret: 123};
				}
				console.log(obj, "obj");
				this.$req.login(obj).then(res => {
					if (!res.success) {
						that.errorTips(that.$refs.tip, res.message, null);
						return;
					}
					that.successTips(that.$refs.tip, "登录成功", null);
					// access_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOlsicmVzMSJdLCJwaG9uZSI6IjE4ODEzNDQyNDM1IiwidXNlcl9uYW1lIjoiYWRtaW4iLCJzY29wZSI6WyJhbGwiXSwiaWQiOiJmYzczZjIxMzg4N2Q4ZTQ4NTZiOWUyNzU2NjU2NTk5YSIsImF2YXRhciI6Imh0dHBzOi8vdGhpcmR3eC5xbG9nby5jbi9tbW9wZW4vdmlfMzIvU1BGODhDTWVWVHBzb01VWjhtSlp2Tk9jSFg1NGZyejZaYVREaG8wYjRxSmpXbldvbDNSTW0yRlJZOW05eFFxOFBBWUp1dG9Oa09BbWs2VWN5amFGdXcvMTMyIiwiZXhwIjoxNjU5MDExMjc5LCJhdXRob3JpdGllcyI6WyJST0xFX2FkbWluIl0sImp0aSI6ImZhMzRmMGQ5LWNmMWYtNDczYi04M2I5LWFmNzM4NzRiMThmZSIsImVtYWlsIjoiMjYyODI3OTE5NEBxcS5jb20iLCJjbGllbnRfaWQiOiJwaG9uZV9jbGllbnRfaWQiLCJ1c2VybmFtZSI6ImFkbWluIn0.F3Xklvz4L3uPQNnq1siptjB_Ftp20WAe3U6PzNuaH6g"
					// avatar: "https://thirdwx.qlogo.cn/mmopen/vi_32/SPF88CMeVTpsoMUZ8mJZvNOcHX54frz6ZaTDho0b4qJjWnWol3RMm2FRY9m9xQq8PAYJutoNkOAmk6UcyjaFuw/132"
					// email: "2628279194@qq.com"
					// expires_in: 59
					// id: "fc73f213887d8e4856b9e2756656599a"
					// jti: "fa34f0d9-cf1f-473b-83b9-af73874b18fe"
					// phone: "18813442435"
					// refresh_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJhZG1pbiIsImF2YXRhciI6Imh0dHBzOi8vdGhpcmR3eC5xbG9nby5jbi9tbW9wZW4vdmlfMzIvU1BGODhDTWVWVHBzb01VWjhtSlp2Tk9jSFg1NGZyejZaYVREaG8wYjRxSmpXbldvbDNSTW0yRlJZOW05eFFxOFBBWUp1dG9Oa09BbWs2VWN5amFGdXcvMTMyIiwiYXV0aG9yaXRpZXMiOlsiUk9MRV9hZG1pbiJdLCJjbGllbnRfaWQiOiJwaG9uZV9jbGllbnRfaWQiLCJhdWQiOlsicmVzMSJdLCJwaG9uZSI6IjE4ODEzNDQyNDM1Iiwic2NvcGUiOlsiYWxsIl0sImF0aSI6ImZhMzRmMGQ5LWNmMWYtNDczYi04M2I5LWFmNzM4NzRiMThmZSIsImlkIjoiZmM3M2YyMTM4ODdkOGU0ODU2YjllMjc1NjY1NjU5OWEiLCJleHAiOjE2NjE2MDMyMTksImp0aSI6ImU2Y2E0NmE4LTUxNTYtNDcyNi1iNGM4LWY2NTQ2YzZhMWY5NCIsImVtYWlsIjoiMjYyODI3OTE5NEBxcS5jb20iLCJ1c2VybmFtZSI6ImFkbWluIn0.SNOXekN6K9iAfTPNZIw48KEALRsqDiNx9cvkqMGTx8E"
					// scope: "all"
					// token_type: "bearer"
					// username: "admin"
					setValue(res.data);
					setTimeout(() => {
						that.switchTab("/index/index")
					}, 2000);
				});
			},
		}
	}
</script>

<style  lang="scss">
	/* 设置背景颜色 */
	page {
		padding-top: var(--status-bar-height);
		background-color: $themeColor;
		box-sizing: border-box;
		height: calc(100vh - 250rpx);
		// 字体
		font-family: Simsun;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		position: relative;
	}

	.container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 40rpx 40rpx;
		display: flex;
		flex-direction: column;

	}

	/* 标题容器 */
	.title-container {
		width: 100%;
		height: 400rpx;
		text-align: center;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img-container {
		width: 25%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.img-container image {
		width: 60%;
		height: 23%;
	}

	.message-container {
		flex: 1;
		height: 100%;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.login-title {
		font-size: 50rpx;
		font-weight: 600;
	}

	.login-title2 {
		font-weight: 100;
		color: #8a8e93;
		font-size: 25rpx;
	}

	.input-container {
		width: 100%;
		height: 240rpx;
	}

	.login-input {
		width: 100%;
		height: 50%;
	}

	.phone-container{
		width: 100%;
		height: 500rpx;
		background-color: red;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.password-container, .phone-container {
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.send-code {
		width: 80%;
		display: block;
		text-align: right;
		margin-right: 10rpx;
	}

	.can-login-btn {
		margin-top: 60rpx;
		width: 100%;
		height: 100rpx;
		background-color: #4271ff;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		color: white;
		font-size: 40rpx;
	}

	.no-login-btn-click {
		margin-top: 60rpx;
		width: 100%;
		height: 100rpx;
		background-color: #cacaca;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		color: white;
		font-size: 40rpx;
	}

	.login-type-container {
		width: 100%;
		height: 100rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;

		.login-cannot-get-code {
			color: $themePurpleColor;
		}

	}

	.tip-container {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		font-size: 20rpx;
	}

	.tips-color {
		color: blue;
	}
</style>
